<template>
  <div>
    <div class="my-video">
      <!-- 视频块 -->
      <video id="video" ref="video" class="video-js vjs-fluid vjs-default-skin" controls preload="auto"></video>
      <!-- 下拉框块 -->
      <div class="prompt" v-if="remove">
        <div class="head" @click="dropDown">
          <div>
            <img style="transition:.2s;" :style="tran" src="./../../assets/images/down.svg" alt />
          </div>
          <div>
            <img class="uav" src="./../../assets/images/uav.svg" alt />
            <span>视频列表</span>
          </div>
          <div @click="remove = false">
            <img src="./../../assets/images/upward.svg" alt />
          </div>
        </div>
        <div style="overflow: hidden;">
          <a-collapse :class="styleHide" accordion>
            <template v-slot:expandIcon="props">
              <a-icon type="caret-right" :rotate="props.isActive ? 90 : 0" />
            </template> 
            <a-collapse-panel v-for="(item,index) in tableDate" :header=" '任务 ： '+item.order.name" :key="index">
              <p>无人机名称 ： {{item.device.model}}</p>
              <p>类型 ：  {{item.device.type}}</p>
              <p></p>
            </a-collapse-panel>
          </a-collapse>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import videojs from "video.js";
// import VideoPlayer from 'vue-video-player'
import 'video.js/dist/video-js.css'
import 'videojs-contrib-hls'
import 'videojs-flash'
import { Collapse, Icon } from "ant-design-vue";
export default {
  components: {
    ACollapse: Collapse,
    ACollapsePanel: Collapse.Panel,
    AIcon: Icon
  },
  data() {
    return {
      publicPath: process.env.BASE_URL,
      tran: "transform: rotate(180deg);",
      styleHide: "hide",
      remove: true,
      tableDate:[]
    };
  },
  mounted() {
    this.getList()
  },
  methods: {
    getList(){
      this.http('get','/task/online').then(res=>{
        this.tableDate = res.data
          this.video = videojs(this.$refs.video, {
          bigPlayButton: false,
          textTrackDisplay: false,
          posterImage: true,
          errorDisplay: false,
          controlBar: {
            pictureInPictureToggle: false
          },
          flash: {
            swf: `${this.publicPath}video-js.swf`
          },
          hls: {
            withCredentials: true
          }
        });
        this.video.reset();
        this.video.src({
          type: "rtmp/mp4",
          src: "rtmp://pull.mmcuav.cn/live/mmcfactory"
        });
        this.video.ready(function() {
          this.play();
        });
      })
    },
    dropDown() {
      if (this.styleHide == "hide") {
        this.styleHide = "show";
        this.tran = "transform: rotate(360deg);";
      } else {
        this.styleHide = "hide";
        this.tran = "transform: rotate(180deg);";
      }
    }
  }
};
</script>

<style lang='less' scoped>

</style>
